<script setup>

</script>

<template>

</template>

<style scoped>

</style>  /**
* 查询菜单
* @return
*/
@GetMapping("/info")
public Result<?> getRole(@RequestParam(defaultValue = "") String name) {

return Result.success(menuService.findMenus(name));
}

/**
* 删除菜单
* @param menuId 删除菜单
*/
@GetMapping("/del/{menuId}")
public Result<?> delById(@PathVariable Integer menuId) {
boolean removeById = menuService.removeById(menuId);
if (!removeById) {
throw new ServiceException(Constants.Code_500, "删除失败");
}
return Result.success();
}


@PostMapping("/update")
public Result<?> update(@RequestBody Menu menu) {
if (menu.getId() == null) {
boolean save = menuService.save(menu);
if (!save) {
throw new ServiceException(Constants.Code_500, "新增失败");
} else {
return Result.success("添加成功");
}
} else {
if (menu.getPath() == null || Objects.equals(menu.getPath(), "")) {
menu.setPId(null);
}
boolean update = menuService.updateMenu(menu);
if (!update) {
throw new ServiceException(Constants.Code_500, "修改失败");
} else {
return Result.success("修改成功");
}
}
}

<div>
<el-card class="box-card" style="height:760px;">
  <div style="padding:0 0 10px 0">
    <div>
      <span style="font-size: 14px">菜单名：</span>
      <el-input v-model="searchName" size="medium" clearable placeholder="搜索菜单名称"
                style="width: 230px;margin-right: 20px "></el-input>
      <el-button style="margin-left: 10px;padding:9px 10px;" size="medium" type="primary" @click="loadInfo ">
        <i class="el-icon-search"></i> 查询
      </el-button>
    </div>
  </div>
  <div style="padding-top: 20px">
    <el-table
        v-loading="loading"
        :data="logTable"
        :header-cell-style="{color:'#000',background:'#f5f7fa'}"
        border
        row-key="id"
        height="640"
        stripe
        style="width: 100% ;height: 650px;"
    >
      <el-table-column>
        <template slot="header">
          <div style="display:flex; justify-content: space-between">
            <div>
              <el-button className="el-button-small" type="primary" icon="el-icon-plus" size="mini"
                         @click="addMenuOne">添加一级菜单
              </el-button>
              <el-button className="el-button-small" type="danger" icon="el-icon-delete" size="mini"
                         @click="handleDel">删除
              </el-button>
            </div>
            <div>
              <el-tooltip class="item" effect="dark" content="刷新" placement="top-start">
                <div style="border: 1px solid #ccc;">
                  <a href=""><i class="el-icon-refresh"
                                style="font-size: 20px;padding: 3px;margin: 0 auto;"></i></a>
                </div>
              </el-tooltip>
            </div>
          </div>
        </template>
        <el-table-column align="center" type="index" label="序号" width="100"></el-table-column>
        <el-table-column align="center" label="名称" prop="name">
        </el-table-column>
        <el-table-column align="center" label="路径" prop="path"></el-table-column>
        <el-table-column align="center" label="图标" class-name="fontSize18" label-class-name="fontSize12">
          <template slot-scope="scope">
            <span :class="scope.row.icon" style="font-size: 25px"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="描述" prop="description"></el-table-column>
        <el-table-column align="center" fixed="right" label="编辑" width="400">
          <template slot-scope="scope">
            <el-button icon="el-icon-menu" size="small" type="info" v-if="!scope.row.pid &&  !scope.row.path" @click="handleAdd(scope.row.id)">新增子菜单
            </el-button>
            <el-button icon="el-icon-edit" size="small" type="success" @click="setMenu(scope.row)">编辑</el-button>
            <el-button icon="el-icon-delete" size="small" type="danger" @click="handleDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</el-card>
<el-dialog :inline="true" :title="title_dialog" :visible.sync="menuFormVisible" width="30% ">
  <el-form :model="menuForm" label-width="100px">
    <el-form-item label="菜单名称：">
      <el-input v-model="menuForm.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="菜单路径：">
      <el-input v-model="menuForm.path" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="图标：">
      <el-select v-model="menuForm.icon" placeholder="请选择" style="width: 80%;">
        <el-option v-for="item in options" :value="item.value" :key="item.name" :label="item.name">
          <i :class="item.value" style="padding-right: 10px; font-size: 18px"> {{item.name}}</i>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="菜单描述：">
      <el-input v-model="menuForm.description"></el-input>
    </el-form-item>
    <el-form-item label="页面路径：">
      <el-input v-model="menuForm.pagePath"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="menuFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="save()">确 定</el-button>
  </div>
</el-dialog>
</div>